<template>
  <div>
    <!-- 轮播展示区域 -->
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(image, index) in getCommodityPotoSrc" :key="index">
          <img :src="image.src" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 加入购物车功能区域 -->
    <div class="Stepper">
      <p class="p1">{{getDetailed.title}}</p>
      <p class="p2">
        市场价：
        <span>¥{{getDetailed.market_price}}</span>销售价
        <em>¥ {{getDetailed.sell_price}}</em>
      </p>

      <!-- 步进器 -->
      <van-row>
        <van-col span="4">购买数量</van-col>
        <van-col span="8">
          <van-stepper v-model="stepperInfo" min="0" max="99" />
        </van-col>
      </van-row>
      <!-- 购买按钮 -->
      <div>
        <van-button type="info" size="small">立即购买</van-button>
        <van-button type="danger" size="small" @click="handelStepperInfo" >加入购物车</van-button>
      </div>
    </div>

    <!-- 商品参数区域 -->
    <div class="parameter">
      <p class="p1">商品参数</p>
      <div class="box">
        <p>商品货号：{{getDetailed.goods_no}}</p>
        <p>库存情况：{{getDetailed.stock_quantity}}</p>
        <p>上架时间：{{getDetailed.add_time}}</p>
      </div>

      <div>
        <van-row>
          <van-button plain type="primary" block @click="handelIntroduce">图文介绍</van-button>
        </van-row>
        <van-row>
          <van-button plain type="info" block @click="handelCommodity">商品评论</van-button>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      // 头部轮播图片地址
      getCommodityPotoSrc: [],
      //   商品详细信息
      getDetailed: [],
      //   步进器的值
      stepperInfo: 1
    }
  },
  computed: {
    ...mapState(['count'])
  },
  mounted () {
    this.getCommodityPoto()
    this.getCommodityDetailed()
  },
  methods: {
    // 获取头部轮播地址信息
    async getCommodityPoto () {
      var { data: res } = await this.$http.get('/api/getthumimages/' + this.$route.query.id)
      this.getCommodityPotoSrc = res.message
    },
    // 获取商品详细介绍信息
    async getCommodityDetailed () {
      var { data: res } = await this.$http.get('/api/goods/getinfo/' + this.$route.query.id)
      this.getDetailed = res.message[0]
      // console.log(this.getDetailed)
    },
    // 点击添加购物车事件

    handelStepperInfo () {
      this.$store.commit('addN', this.stepperInfo)
      this.$store.commit('addDetailed', { id: this.getDetailed.id, price: this.getDetailed.sell_price })
      this.$toast('添加购物车成功')

      // 添加到购物车的商品。。。。。
      // // 异步函数
      // var axiosget = this.$http.get('/api/goods/getshopcarlist/' + this.$route.query.id)

      // this.$store.commit('cxsp', axiosget)
      // // 。。。。。。。。

      //  //添加到购物车的商品。。。。。
      //      //异步函数
      //       var axiosget=this.$http.get("/api/goods/getshopcarlist/"+this.$route.query.id)

      //       this.$store.commit('cxsp',axiosget)

      this.$store.dispatch('getCar', this.$route.query.id)
      //       //。。。。。。。。
    },
    // 编程时导航到图文介绍
    handelIntroduce () {
      this.$router.push('/goods/getdesc/' + this.$route.query.id)
    },
    // 编程时导航到商品评论
    handelCommodity () {
      this.$router.push('/goods/goodsay/' + this.$route.query.id)
    }
  }
}
</script>

<style lang="less" scoped>
html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  height: 301px !important;
  background-color: #ffffff;
}

.swipe {
  margin:50px auto 10px;
  width: 335px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.Stepper {
  width: 335px;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin: auto;
  padding: 5px 15px;
  box-sizing: border-box;
  .p1 {
    // text-align: center;
    font-size: 12px;
    border-bottom: 1px solid #cccccc;
  }
  .p2 {
    font-size: 10px;
    color: #c0c0c0;
    span {
      text-decoration: line-through;
      margin-right: 15px;
    }
    em {
      color: red;
    }
  }
  .van-button {
    margin: 10px 10px 10px 0;
  }
  .van-row {
    height: 28px;
    font-size: 12px;
    text-align: center;
    line-height: 28px;
  }
}

.parameter {
  width: 335px;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin: 10px auto;
  padding: 5px 15px;
  box-sizing: border-box;
  margin-bottom: 60px;
  .p1 {
    font-size: 15px;
    border-bottom: 1px solid #ccc;
  }
  .box {
    font-size: 10px;
    color: #cccccc;
    border-bottom: 1px solid #ccc;
  }
  .van-row {
      margin: 8px;
      .van-button {
          width: 290px;
      }
  }
}

</style>
